<template>
	<div class="payment">
		<!-- :style="{ height: evieHeight}" -->
		<div class="payment_list">
			<div @click="opderIndex(0)">
				<div :class="{line:line_index==0}">待支付</div>
				<div v-if="line_index==0"></div>
			</div>
			<div @click="opderIndex(1)">
				<div :class="{line:line_index==1}">待核实</div>
				<div v-if="line_index==1"></div>
			</div>
			<div @click="opderIndex(2)">
				<div :class="{line:line_index==2}">已支付</div>
				<div v-if="line_index==2"></div>
			</div>
			<div @click="opderIndex(3)">
				<div :class="{line:line_index==3}">故障记录</div>
				<div v-if="line_index==3"></div>
			</div>
		</div>
	
		<div class="box">
			<div class="orderStateList" v-if="line_index != 3">
				<div class="pay" v-for="(item,index) in list" :key="index" v-if="list.length > 0">
					<img class="pay_bg" src="../../../static/img/order/bg.png">
					<div class="pay_1">
						<div>订单号：{{item.order_sn}}</div>
						<div :class="{ 'text_color_red' : item.status == 2 }">
							{{item.status && item.status == 2 ? "待支付" : item.status == 3 ? "待核实" : item.status == 4 ? "已支付" : ""}}
						</div>
					</div>
					<div class="pay_2">
						<div>收费月份:</div>
						<div>{{item.time_slot}}</div>
					</div>
					<div class="pay_3">
						<div>应付金额：</div>
						<div>¥ {{item.order_amount}}</div>
					</div>
					<div class="pay_4">
						<div @click="xiangQ(item.id)" :class="{ 'text_color_red border_red' : item.status == 2 }">
							{{item.status && item.status == 2 ? "去转账" : "详情"}}
						</div>
					</div>
				</div>
				<div v-if="list && list.length < 1">
					<noContent></noContent>
				</div>
			</div>
			<div class="recordList" v-if="line_index == 3">
				<div class="pay-record" v-for="(item,index) in list" :key="index" v-if="list.length > 0">
					<div class="pay-1-title">矿机掉线故障通知</div>
					<div class="pay-2-content">
						{{item.name}}您好，您的矿机在挖矿过程中出现故障,我们已 将故障处理并恢复其上线！请知晓！
					</div>
					<div class="pay-3">
						<div>机架编号</div>
						<div>{{item.frame_num}}</div>
					</div>
					<div class="pay-3">
						<div>掉线时间</div>
						<div>{{item.drop_line_time}}</div>
					</div>
					<div class="pay-3">
						<div>掉线时间</div>
						<div>{{item.on_line_time}}</div>
					</div>
					<div class="pay-3" style="border:none">
						<div>掉线原因</div>
						<div>{{item.content}}</div>
					</div>
				</div>
				<!-- {{listR.length}} -->
				<div v-if="listR && listR.length < 1">
					<noContent></noContent>
				</div>
			</div>
		</div>
	
		<div class="exitLogin">
			<img src="../../../static/img/login/exitLogin.png" alt="" @click="exit">	
		</div>
	
	
	</div>
</template>

<script>
	import js from "../../utils/js"
	import noContent from "../../components/noContent"
	export default {
		data() {
			return {
				evieHeight: "",
				line_index: 0,
				list: {},
				getPay: {},
				getVerify: {},
				getPaid: {},
				getRecord: {},
				datas: {
					type: "unpaid", //类型:unpaid:待支付；verify:待核实；paid:已支付;fault_list:故障记录
					p: 1, //当前请求页数,默认第一页
					user_id: "", //当前请求用户Id
					token: "", //当前登录用户token
				},
				url: "/Users/orderList",
				url_fault: "/Users/FaultList",
				requestList: [],
			};
		},
	
		components: {
			noContent
		},
		onLoad() {
			this.line_index = 0;
			this.datas.type = "unpaid";
			this.getListRequest(this.url);
		},
		onReachBottom() {
			console.log("上拉");
			this.datas.p++;
			let url;
			this.line_index != 3 ? url = this.url : url = this.url_fault;
			console.log(url);
			//this.$API = js(wx);
			this.$API
				.post(url, this.datas)
				.then(
					res => {
						var list = res.result.order_list || res.result.list
						var oldList = this.list;
						var newList;
						if (list.length > 1) {
							newList = [...oldList, ...list];
						} else {
							this.datas.p--;
						}
						this.list = newList;
					},
					true,
					true
				);
		},
		onPullDownRefresh() {
			console.log("下拉");
			this.datas.p = 1;
			let url;
			this.line_index != 3 ? url = this.url : url = this.url_fault;
			this.getListRequest(url);
		},
	
		methods: {
			xiangQ(id) {
				wx.navigateTo({
					url: '../../pages/details/main?getId=' + id
				})
			},
			scroll(event) {
	
			},
			opderIndex(e) {
				this.line_index = e;
				this.datas.p = 1;
				var url = this.url;
				switch (e) {
					case 0:
						this.datas.type = "unpaid";
						break;
					case 1:
						this.datas.type = "verify";
						break;
					case 2:
						this.datas.type = "paid";
						break;
					case 3:
						url = this.url_fault;
						this.datas.type = "fault_list";
						break;
				}
				this.getListRequest(url);
			},
			getListRequest(url) {
				//this.$API = js(wx);
				this.$API
					.post(url, this.datas)
					.then(
						res => {
							this.list = res.result.order_list || res.result.list;
							wx.stopPullDownRefresh();
						},
						true,
						true
					);
			},
			init() {
				this.getListRequest(this.url);
			},
	
			exit() {
				wx.showModal({
					title: '退出登录',
					content: '确定退出登录吗？',
					success: function(res) {
						if (res.confirm) {
							wx.removeStorage({
								key: "user_id",
								success: function(res) {
									wx.reLaunch({
										url: "../default/main"
									});
								},
								fail(err) {
									console.log("清空信息失败");
								}
							});
						}
					}
				});
			}
		},
	
		created() {},
		mounted() {
			this.datas.user_id = wx.getStorageSync("user_id");
			this.datas.token = wx.getStorageSync("user_token");
			this.evieHeight = wx.getSystemInfoSync().windowHeight + "px";
			// this.init();
			this.opderIndex(0);
		},
		watch: {
			line_index(newVal, oldVal) {
				// if (newVal == 3) {
				// 	this.$API
				// 	.post("/Users/FaultList", {
				// 		type: "fault_list",
				// 		p: 1,
				// 		token: wx.getStorageSync("user_token"),
				// 		user_id: wx.getStorageSync("user_id")
				// 	})
				// 	.then(
				// 		res => {
				// 			console.log(res);
				// 		},
				// 		true,
				// 		true
				// 	);
				// }
			}
		}
	};
</script>

<style scoped>
	#box {
		overflow-y: scroll;
		background-color: #f5f5f5;
		padding-bottom: 40rpx;
	}
	
	.payment {
		width: 750rpx;
		font-family: "苹方";
		background-color: #f3f3f3;
		position: relative;
		/* overflow-y: scroll; */
	}
	
	.payment_list {
		width: 750rpx;
		height: 80rpx;
		background-color: white;
		border-top: 2rpx solid rgb(230, 228, 228);
		padding-bottom: 10rpx;
	}
	
	.payment_list>div:nth-of-type(1) {
		margin-left: 30rpx;
	}
	
	.payment_list>div {
		width: 172.5rpx;
		height: 80rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		color: #666666;
		float: left;
		text-align: center;
	}
	
	.payment_list>div div:nth-of-type(2) {
		width: 40rpx;
		height: 6rpx;
		background-color: black;
		border-radius: 6rpx;
		margin-left: 66rpx;
	}
	
	.line {
		color: black;
		font-weight: bold;
	}
	
	.exitLogin {
		width: 200rpx;
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
		opacity: 0.4;
	}
	
	.exitLogin img {
		width: 200rpx;
		height: 204rpx;
	}
	
	.exitLogin:hover {
		opacity: 1;
	}
	
	.exitLogin:active {
		opacity: 1;
	}
	
	.pay {
		width: 690rpx;
		height: 400rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		position: relative;
	}
	
	.pay_bg {
		width: 690rpx;
		height: 400rpx;
		position: absolute;
	}
	
	.pay_1,
	.pay_2,
	.pay_3,
	.pay_4 {
		position: absolute;
	}
	
	.pay_1 {
		height: 80rpx;
		width: 630rpx;
		margin-left: 30rpx;
		line-height: 80rpx;
	}
	
	.pay_2 {
		height: 80rpx;
		width: 630rpx;
		margin-left: 30rpx;
		line-height: 80rpx;
		margin-top: 85rpx;
	}
	
	.pay_3 {
		height: 80rpx;
		width: 630rpx;
		margin-left: 30rpx;
		line-height: 80rpx;
		margin-top: 170rpx;
	}
	
	.pay_4 {
		width: 630rpx;
		height: 100rpx;
		margin-top: 270rpx;
		margin-left: 30rpx;
	}
	
	.pay_1 div:nth-of-type(1) {
		float: left;
		font-size: 28rpx;
		color: #999999;
		/* width: 400rpx; */
		width: 80%;
	}
	
	.pay_1 div:nth-of-type(2) {
		float: right;
		color: #13D384;
		font-size: 28rpx;
		text-align: right;
		/* width: 230rpx; */
		width: 20%
	}
	
	.pay_2 div:nth-of-type(1) {
		float: left;
		font-size: 28rpx;
		color: #333333;
		width: 180rpx;
	}
	
	.pay_2 div:nth-of-type(2) {
		float: right;
		color: #333333;
		font-size: 28rpx;
		text-align: right;
		width: 450rpx;
	}
	
	.pay_3 div:nth-of-type(1) {
		float: left;
		font-size: 28rpx;
		color: #333333;
		width: 315rpx;
	}
	
	.pay_3 div:nth-of-type(2) {
		float: right;
		color: #333333;
		font-size: 28rpx;
		text-align: right;
		width: 315rpx;
	}
	
	.pay_4 div:nth-of-type(1) {
		color: #333333;
		width: 180rpx;
		height: 66rpx;
		border: 2rpx solid #333333;
		border-radius: 66rpx;
		box-sizing: border-box;
		text-align: center;
		line-height: 66rpx;
		float: left;
		margin-top: 17rpx;
		font-size: 28rpx;
		margin-left: 449rpx;
	}
	
	.text_color_red {
		color: #ff5858 !important;
	}
	
	.border_red {
		border-color: #ff5858 !important;
	}
	
	
	/* 故障记录 */
	
	.pay-record {
		width: 690rpx;
		height: 600rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		background-color: white;
		border-radius: 4rpx;
	}
	
	.pay-1-title {
		width: 630rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-weight: bold;
		font-size: 32rpx;
		margin-left: 30rpx;
		border-bottom: 2rpx solid #CACACA;
		box-sizing: border-box;
	}
	
	.pay-2-content {
		width: 630rpx;
		height: 100rpx;
		font-size: 28rpx;
		color: #666666;
		margin-left: 30rpx;
		border-bottom: 2rpx solid #CACACA;
		box-sizing: border-box;
		margin-top: 20rpx;
	}
	
	.pay-3 {
		width: 630rpx;
		height: 95rpx;
		font-size: 28rpx;
		color: #666666;
		margin-left: 30rpx;
		border-bottom: 2rpx solid #CACACA;
		box-sizing: border-box;
		line-height: 95rpx;
	}
	
	.pay-3 div:nth-of-type(1) {
		float: left;
		width: 200rpx;
	}
	
	.pay-3 div:nth-of-type(2) {
		float: left;
		width: 430rpx;
		text-align: right;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
